import './Message.css'
import ReactDom from 'react-dom/client'

const Message = () => {
    return <div>消息提示</div>
}

const queue = []

window.onShow = () => {
    const messageContainer = document.createElement('div')
    messageContainer.className = 'message'
    messageContainer.style.top = `${queue.length * 50} px`
    // 挂载到body上
    document.body.appendChild(messageContainer)
    const root = ReactDom.createRoot(messageContainer)
    root.render(<Message />)

    queue.push({
        messageContainer,
        root
    })

    // 2秒后卸载
    setTimeout(() => {
        const item = queue.find(item => item.messageContainer === messageContainer)
        item.root.unmount()
        document.body.removeChild(item.messageContainer)
        queue.splice(queue.indexOf(item), 1)
        // document.body.removeChild(messageContainer)
    }, 2000)
}